<template>
  <div id="login">
    <form v-show="loginPageShow">
      <h2>登录</h2>
      <p>
        <i class="icon iconfont icon-ren"></i>
        <input type="text" v-model="loginInfo.mobile" placeholder="用户名">
      </p>
      <p>
        <i class="icon iconfont icon-suo"></i>
        <input type="password" v-model="loginInfo.password" placeholder="密码">
      </p>
      <p>
        <van-button class="login_btn" type="primary" size="small" @click.prevent="submitLogin">登陆</van-button>
      </p>
      <p>
        <span class="forget_password">忘记密码？</span>
      </p>
    </form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import {setCookieStorage} from '@/assets/js/common.js'
export default {
  data () {
    return {
      loginInfo: {
        mobile: '',
        password: '',
        openId: ''
      },
      code: '',
      loginPageShow: true
    }
  },
  mounted () {
    // var search = window.location.search.substring(1)
    // var startIndex = search.indexOf('code=') + 5
    // var endIndex = search.indexOf('&state')
    // var code = search.substring(startIndex, endIndex)
    // if (code) {
    //   this.code = code
    // }
    // this.getOpenId()
    let openid = this.getQueryString('openid')
    let appid = this.getQueryString('appid')
    this.loginInfo.openId = openid
    this.appid = appid
    this.$api.post(`/api/login/${appid}/login`, {
      openid: openid
    }).then(res => {
      if (res.code === 0) {
        setCookieStorage('userType', res.data.userType === 1 ? '学生' : '老师')
        setCookieStorage('userInfo', res.data.user)
        setCookieStorage('appid', this.appid)
        this.$router.push('/home')
      }
    })
  },
  methods: {
    getQueryString (name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) {
        return unescape(r[2])
      }
    },
    // getOpenId () {
    //   this.$api.get('/api/mdwechatuser/getopenid', {
    //     code: this.code
    //   }).then(res => {
    //     if (res.code === 0) {
    //       if (res.data.userType === 0) {
    //         this.loginInfo.openId = res.data.openId
    //       } else if (res.data.userType === 1 || res.data.userType === 2) {
    //         this.loginPageShow = false
    //         setCookieStorage('userType', res.data.userType === 1 ? '学生' : '老师')
    //         setCookieStorage('userInfo', res.data.user)
    //         setCookieStorage('appid', this.appid)
    //         this.$router.push('/home')
    //       } else {
    //         this.loginPageShow = true
    //       }
    //     }
    //   })
    // },
    submitLogin () {
      if (this.loginInfo.mobile && this.loginInfo.password) {
        this.$api.post(`/api/login/${this.appid}/login`, this.loginInfo).then(res => {
          if (res.code === 0) {
            setCookieStorage('userType', res.data.userType === 1 ? '学生' : '老师')
            setCookieStorage('userInfo', res.data.user)
            setCookieStorage('appid', this.appid)
            this.$router.push('/home')
          } else {
            Toast({
              message: '账号或密码错误！',
              position: 'bottom'
            })
          }
        })
      } else {
        Toast({
          message: '请输入用户名或密码！',
          position: 'bottom'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#login {
  form {
    width: 2.4rem;
    margin: 1rem auto;
    margin-top: 0;
    padding-top: 1rem;
    h2 {
      font-size: 22px;
      text-align: center;
      font-weight: normal;
    }
    p {
      text-align: right;
      input {
        background: transparent;
        border: 1px solid #ccc;
        width: 2.1rem;
        height: .3rem;
        padding-left: .1rem;
        display: inline-block;
        box-sizing: border-box;
      }
      .icon {
        font-size: 18px;
        color: #2196f3;
      }
      .login_btn {
        width: 2.1rem;
      }
      .forget_password {
        color: #cfcfcf;
        & {
          & {
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
